<template>
  <div class="container">
    <div class="result-container">
    <h1 class="title">兵器工业集团先进民品产业体系评估结果</h1>
    
    <!-- 体系综合得分 -->
    <div class="chart-section">
      <h2 class="chart-title">体系综合得分</h2>
      <div ref="chart1" class="chart"></div>
    </div>
    
    <!-- 一级指标得分 -->
    <div class="chart-section">
      <h2 class="chart-title">一级指标得分</h2>
      <div ref="chart2" class="chart"></div>
    </div>
    
    <!-- 一级指标得分增长率 -->
    <div class="chart-section">
      <h2 class="chart-title">一级指标得分增长率</h2>
      <div ref="chart3" class="chart"></div>
    </div>
  </div>
  <div class="btn-container">
    <div class="btn-excel" @click="exportToExcel">下载数据</div>
    <div class="btn" @click="showPreviewDialog = true">分析报告</div>
  </div>
  

  <!-- 预览弹窗 -->
  <div v-if="showPreviewDialog" class="dialog-overlay" @click="closeDialog">
    <div class="dialog-content" @click.stop>
      <div class="dialog-header">
        <h2>兵器工业集团先进民品产业体系评估结果</h2>
        <button class="close-btn" @click="closeDialog">×</button>
      </div>
      
      <div class="dialog-body" id="pdf-content">
        <!-- 单页显示所有图表 -->
        <div class="pdf-page">
          <div v-html="resultStore.resultData.endHtml" style="width:100%;  margin:0 auto;"></div>
          <div class="pdf-chart-section" style="margin-top:50px;">
            <div class="pdf-chart-title">体系综合得分</div>
            <div ref="previewChart1" class="pdf-chart compact1"></div>
          </div>
          <div class="pdf-chart-section">
            <div class="pdf-chart-title">一级指标得分</div>
            <div ref="previewChart2" class="pdf-chart compact2"></div>
          </div>
          <div class="pdf-chart-section">
            <div class="pdf-chart-title">一级指标得分增长率</div>
            <div ref="previewChart3" class="pdf-chart compact3"></div>
          </div>
        </div>
      </div>
      
      <div class="dialog-footer">
        <button class="download-btn" @click="downloadPDF" :disabled="isGeneratingPDF">
          {{ isGeneratingPDF ? '生成中...' : '下载' }}
        </button>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { useResultStore } from '@/stores/result'
import htmlToPdf from '@/utils/htmlToPDF'
import * as XLSX from 'xlsx'
const resultStore = useResultStore()

const chart1 = ref(null)
const chart2 = ref(null)
const chart3 = ref(null)
const previewChart1 = ref(null)
const previewChart2 = ref(null)
const previewChart3 = ref(null)

let chart1Instance = null
let chart2Instance = null
let chart3Instance = null
let previewChart1Instance = null
let previewChart2Instance = null
let previewChart3Instance = null

// 弹窗状态
const showPreviewDialog = ref(false)
const isGeneratingPDF = ref(false)

// 从JSON数据中提取数据
const scoresData = resultStore.resultData.results.scores
const years = Object.keys(scoresData).sort()

// 体系综合得分数据
const systemScoreData = {
  years: years,
  barData: years.map(year => scoresData[year].total),
  lineData: years.map((year, index) => {
    // 第一年没有增长率数据，返回null；其他年份从resultStore获取
    return index === 0 ? null : (resultStore.resultData.totalGrowthRates[year] || 0)
  })
}

// 一级指标得分数据
const firstLevelCategories = ['结构优化', '高质量发展', '全面协同']
const primaryIndicatorData = {
  years: years,
  categories: firstLevelCategories,
  data: [
    years.map(year => scoresData[year].first_level['结构优化']),
    years.map(year => scoresData[year].first_level['高质量发展']),
    years.map(year => scoresData[year].first_level['全面协同'])
  ]
}

// 一级指标得分增长率数据（从resultStore获取增长率数据）
const growthRateData = {
  years: years.slice(1), // 增长率从第二年开始
  series: [
    { 
      name: '结构优化', 
      data: years.slice(1).map(year => resultStore.resultData.firstLevelGrowthRates['结构优化'][year] || 0), 
      color: '#1a3271' 
    },
    { 
      name: '高质量发展', 
      data: years.slice(1).map(year => resultStore.resultData.firstLevelGrowthRates['高质量发展'][year] || 0), 
      color: '#4b83be' 
    },
    { 
      name: '全面协同', 
      data: years.slice(1).map(year => resultStore.resultData.firstLevelGrowthRates['全面协同'][year] || 0), 
      color: '#72c2f0' 
    }
  ]
}

// 初始化体系综合得分图表
const initChart1 = () => {
  // 分别计算柱状图和折线图的最大值
  const barMaxValue = Math.max(...systemScoreData.barData)
  const barDynamicMax = Math.ceil(barMaxValue * 1.1 / 10) * 10 // 增加10%余量并向上取整到10的倍数
  const barDynamicInterval = Math.ceil(barDynamicMax / 5) // 分成5个区间
  
  // 计算增长率的最大值和最小值，过滤掉null值
  const lineData = systemScoreData.lineData.filter(val => val !== null)
  const lineMaxValue = lineData.length > 0 ? Math.max(...lineData) : 0
  const lineMinValue = lineData.length > 0 ? Math.min(...lineData) : 0
  
  // 完全根据数据动态计算范围，生成类似 -5%, 0%, 5%, 10%, 15%, 20%, 25% 的刻度
  const lineDynamicMax = Math.ceil(lineMaxValue * 1.1 / 5) * 5 // 向上取整到5的倍数
  const lineDynamicMin = lineMinValue < 0 ? Math.floor(lineMinValue * 1.1 / 5) * 5 : 0 // 有负值时向下取整到5的倍数，否则为0
  const lineDynamicInterval = 5 // 固定间隔为5%，生成 -5%, 0%, 5%, 10%, 15%, 20%, 25% 等刻度
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['体系综合得分', '增长率'],
      top: 10,
      textStyle: {
        fontSize: 14
      }
    },
    xAxis: {
      type: 'category',
      data: systemScoreData.years,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        fontSize: 13
      },
      splitLine: {
        show: false
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '得分',
      splitLine: {
        show: false
      },
        min: 0,
        max: barDynamicMax,
        interval: barDynamicInterval,
        axisLabel: {
          formatter: '{value}',
          fontSize: 13
        },
        nameTextStyle: {
          fontSize: 13
        }
      },
      {
        type: 'value',
        name: '增长率(%)',
      splitLine: {
        show: false
      },
        min: lineDynamicMin,
        max: lineDynamicMax,
        interval: lineDynamicInterval,
        axisLabel: {
          formatter: '{value}%',
          fontSize: 13
        },
        nameTextStyle: {
          fontSize: 13
        }
      }
    ],
    series: [
      {
        name: '体系综合得分',
        type: 'bar',
        data: systemScoreData.barData,
        barWidth: '40%', // 缩小柱状图宽度
        itemStyle: {
          color: '#2E5DB7'
        },
        label: {
          show: true,
          position: 'top',
          color: '#333',
          fontSize: 12
        }
      },
      {
        name: '增长率',
        type: 'line',
        yAxisIndex: 1,
        data: systemScoreData.lineData,
        itemStyle: {
          color: '#ff7f00'
        },
        lineStyle: {
          color: '#ff7f00',
          width: 2
        },
        symbol: 'circle',
        symbolSize: 6,
        label: {
          show: true,
          position: 'top',
          color: '#ff7f00',
          fontSize: 12
        }
      }
    ]
  }
  chart1Instance.setOption(option)
}

// 初始化一级指标得分图表
const initChart2 = () => {
  // 计算数据的最大值
  const allData = primaryIndicatorData.data.flat()
  const maxValue = Math.max(...allData)
  const dynamicMax = Math.ceil(maxValue * 1.1 / 10) * 10 // 增加10%余量并向上取整到10的倍数
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: primaryIndicatorData.categories,
      top: 10,
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: dynamicMax,
      axisLabel: {
        fontSize: 13
      }
    },
    yAxis: {
      type: 'category',
      data: primaryIndicatorData.years,
      axisLabel: {
        fontSize: 13
      }
    },
    series: [
      {
        name: '结构优化',
        type: 'bar',
        data: primaryIndicatorData.data[0],
        barWidth: '15%', // 缩小柱状图高度
        itemStyle: {
          color: '#1a3271'
        },
        label: {
          show: true,
          position: 'right',
          color: '#333',
          fontSize: 12
        }
      },
      {
        name: '高质量发展',
        type: 'bar',
        data: primaryIndicatorData.data[1],
        barWidth: '15%', // 缩小柱状图高度
        itemStyle: {
          color: '#4b83be'
        },
        label: {
          show: true,
          position: 'right',
          color: '#333',
          fontSize: 12
        }
      },
      {
        name: '全面协同',
        type: 'bar',
        data: primaryIndicatorData.data[2],
        barWidth: '15%', // 缩小柱状图高度
        itemStyle: {
          color: '#72c2f0'
        },
        label: {
          show: true,
          position: 'right',
          color: '#333',
          fontSize: 12
        }
      }
    ]
  }
  chart2Instance.setOption(option)
}

// 初始化一级指标得分增长率图表
const initChart3 = () => {
  // 计算数据的最大值
  const allData = growthRateData.series.flatMap(series => series.data)
  const maxValue = Math.max(...allData)
  const dynamicMax = Math.ceil(maxValue * 1.1 / 10) * 10 // 增加10%余量并向上取整到10的倍数
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: growthRateData.series.map(item => item.name),
      top: 10,
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: growthRateData.years,
      axisLabel: {
        fontSize: 13
      }
    },
    yAxis: {
      type: 'value',
      max: dynamicMax,
      axisLabel: {
        formatter: '{value}%',
        fontSize: 13
      }
    },
    series: growthRateData.series.map(item => ({
      name: item.name,
      type: 'line',
      data: item.data,
      itemStyle: {
        color: item.color
      },
      lineStyle: {
        color: item.color,
        width: 2
      },
      symbol: 'circle',
      symbolSize: 6,
      label: {
        show: true,
        position: 'top',
        color: item.color,
        fontSize: 12
      }
    }))
  }
  chart3Instance.setOption(option)
}

// 初始化预览图表
const initPreviewCharts = async () => {
  await nextTick()
  
  if (previewChart1.value && previewChart2.value && previewChart3.value) {
    previewChart1Instance = echarts.init(previewChart1.value)
    previewChart2Instance = echarts.init(previewChart2.value)
    previewChart3Instance = echarts.init(previewChart3.value)
    
    // 使用相同的配置初始化预览图表
    initPreviewChart1()
    initPreviewChart2()
    initPreviewChart3()
  }
}

// 预览图表配置（与原图表相同但适配PDF尺寸）
const initPreviewChart1 = () => {
  // 分别计算柱状图和折线图的最大值
  const barMaxValue = Math.max(...systemScoreData.barData)
  const barDynamicMax = Math.ceil(barMaxValue * 1.1 / 10) * 10
  const barDynamicInterval = barDynamicMax / 5
  
  // 计算增长率的最大值和最小值，过滤掉null值
  const lineData = systemScoreData.lineData.filter(val => val !== null)
  const lineMaxValue = lineData.length > 0 ? Math.max(...lineData) : 0
  const lineMinValue = lineData.length > 0 ? Math.min(...lineData) : 0
  
  // 完全根据数据动态计算范围，生成类似 -5%, 0%, 5%, 10%, 15%, 20%, 25% 的刻度
  const lineDynamicMax = Math.ceil(lineMaxValue * 1.1 / 5) * 5 // 向上取整到5的倍数
  const lineDynamicMin = lineMinValue < 0 ? Math.floor(lineMinValue * 1.1 / 5) * 5 : 0 // 有负值时向下取整到5的倍数，否则为0
  const lineDynamicInterval = 5 // 固定间隔为5%，生成 -5%, 0%, 5%, 10%, 15%, 20%, 25% 等刻度
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['体系综合得分', '增长率'],
      top: 5,
      textStyle: {
        fontSize: 20
      }
    },
    grid: {
      top: '20%',
      left: '8%',
      right: '8%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: systemScoreData.years,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        fontSize: 20
      },
      splitLine: {
        show: false
      }
    }],
    yAxis: [{
      type: 'value',
      name: '得分',
      min: 0,
      max: barDynamicMax,
      splitLine: {
        show: false
      },
      interval: barDynamicInterval,
      axisLabel: {
        formatter: '{value}',
        fontSize: 20
      },
      nameTextStyle: {
        fontSize: 20
      }
    }, {
      type: 'value',
      name: '增长率(%)',
      min: lineDynamicMin,
      max: lineDynamicMax,
      splitLine: {
        show: false
      },
      interval: lineDynamicInterval,
      axisLabel: {
        formatter: '{value}%',
        fontSize: 20
      },
      nameTextStyle: {
        fontSize: 20
      }
    }],
    series: [{
      name: '体系综合得分',
      type: 'bar',
      data: systemScoreData.barData,
      barWidth: '40%',
      itemStyle: {
        color: '#2E5DB7'
      },
      label: {
        show: true,
        position: 'top',
        color: '#333',
        fontSize: 20
      }
    }, {
      name: '增长率',
      type: 'line',
      yAxisIndex: 1,
      data: systemScoreData.lineData,
      itemStyle: {
        color: '#ff7f00'
      },
      lineStyle: {
        color: '#ff7f00',
        width: 2
      },
      symbol: 'circle',
      symbolSize: 4,
      label: {
        show: true,
        position: 'top',
        color: '#ff7f00',
        fontSize: 20
      }
    }]
  }
  previewChart1Instance.setOption(option)
}

const initPreviewChart2 = () => {
  const allData = primaryIndicatorData.data.flat()
  const maxValue = Math.max(...allData)
  const dynamicMax = Math.ceil(maxValue * 1.1 / 10) * 10
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: primaryIndicatorData.categories,
      top: 5,
      textStyle: {
        fontSize: 20
      }
    },
    grid: {
      top:'10%',
      left: '3%',
      right: '3%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: dynamicMax,
      axisLabel: {
        fontSize: 20
      }
    },
    yAxis: {
      type: 'category',
      data: primaryIndicatorData.years,
      axisLabel: {
        fontSize: 20
      }
    },
    series: [{
      name: '结构优化',
      type: 'bar',
      data: primaryIndicatorData.data[0],
      barWidth: '20%',
      itemStyle: {
        color: '#1a3271'
      },
      label: {
        show: true,
        position: 'right',
        color: '#333',
        fontSize: 20
      }
    }, {
      name: '高质量发展',
      type: 'bar',
      data: primaryIndicatorData.data[1],
      barWidth: '20%',
      itemStyle: {
        color: '#4b83be'
      },
      label: {
        show: true,
        position: 'right',
        color: '#333',
        fontSize: 20
      }
    }, {
      name: '全面协同',
      type: 'bar',
      data: primaryIndicatorData.data[2],
      barWidth: '20%',
      itemStyle: {
        color: '#72c2f0'
      },
      label: {
        show: true,
        position: 'right',
        color: '#333',
        fontSize: 20
      }
    }]
  }
  previewChart2Instance.setOption(option)
}

const initPreviewChart3 = () => {
  const allData = growthRateData.series.flatMap(series => series.data)
  const maxValue = Math.max(...allData)
  const dynamicMax = Math.ceil(maxValue * 1.1 / 10) * 10
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: growthRateData.series.map(item => item.name),
      top: 10,
      textStyle: {
        fontSize: 20
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: growthRateData.years,
      
      axisLabel: {
        fontSize: 20
      }
    },
    yAxis: {
      type: 'value',
      max: dynamicMax,
      axisLabel: {
        formatter: '{value}%',
        fontSize: 20
      },
    },
    series: growthRateData.series.map(item => ({
      name: item.name,
      type: 'line',
      data: item.data,
      itemStyle: {
        color: item.color
      },
      lineStyle: {
        color: item.color,
        width: 2
      },
      symbol: 'circle',
      symbolSize: 6,
      label: {
        fontSize: 20,
        show: true,
        position: 'top',
        color: item.color
      }
    }))
  }
  previewChart3Instance.setOption(option)
}

// 关闭弹窗
const closeDialog = () => {
  showPreviewDialog.value = false
  // 销毁预览图表实例
  previewChart1Instance?.dispose()
  previewChart2Instance?.dispose()
  previewChart3Instance?.dispose()
  previewChart1Instance = null
  previewChart2Instance = null
  previewChart3Instance = null
}

// 导出Excel
const exportToExcel = () => {
  try {
    // 创建工作簿
    const workbook = XLSX.utils.book_new()
    
    // 第一个工作表：体系综合得分
    const sheet1Data = [
      ['', '体系综合得分', '增长率'],
      [years[0], scoresData[years[0]].total, ''], // 第一年没有增长率
      ...years.slice(1).map(year => [
        year,
        scoresData[year].total,
        resultStore.resultData.totalGrowthRates[year] || 0
      ])
    ]
    
    const worksheet1 = XLSX.utils.aoa_to_sheet(sheet1Data)
    XLSX.utils.book_append_sheet(workbook, worksheet1, '体系综合得分')
    
    // 第二个工作表：一级指标得分
    const sheet2Data = [
      ['', '结构优化', '高质量发展', '全面协同'],
      ...years.map(year => [
        year,
        scoresData[year].first_level['结构优化'],
        scoresData[year].first_level['高质量发展'],
        scoresData[year].first_level['全面协同']
      ])
    ]
    
    const worksheet2 = XLSX.utils.aoa_to_sheet(sheet2Data)
    XLSX.utils.book_append_sheet(workbook, worksheet2, '一级指标得分')
    
    // 第三个工作表：一级指标得分增长率
    const sheet3Data = [
      ['', '结构优化', '高质量发展', '全面协同'],
      [years[0], '', '', ''], // 第一年没有增长率
      ...years.slice(1).map(year => [
        year,
        resultStore.resultData.firstLevelGrowthRates['结构优化'][year] || 0,
        resultStore.resultData.firstLevelGrowthRates['高质量发展'][year] || 0,
        resultStore.resultData.firstLevelGrowthRates['全面协同'][year] || 0
      ])
    ]
    
    const worksheet3 = XLSX.utils.aoa_to_sheet(sheet3Data)
    XLSX.utils.book_append_sheet(workbook, worksheet3, '一级指标得分增长率')
    
    // 下载文件
    XLSX.writeFile(workbook, '评估结果数据.xlsx')
    
    alert('Excel文件导出成功！')
  } catch (error) {
    console.error('Excel导出失败:', error)
    alert('Excel导出失败，请重试')
  }
}

// 下载PDF
const downloadPDF = async () => {
  try {
    isGeneratingPDF.value = true
    
    // 等待图表完全渲染
    await nextTick()
    await new Promise(resolve => setTimeout(resolve, 300))
    
    const blob = await htmlToPdf.getPdf('评估结果报告', '.dialog-body')
    
    // 创建下载链接
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = '评估结果报告.pdf'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    
    closeDialog()
  } catch (error) {
    console.error('PDF下载失败:', error)
    alert('PDF生成失败，请重试')
  } finally {
    isGeneratingPDF.value = false
  }
}

// 监听弹窗显示状态，初始化预览图表
watch(showPreviewDialog, (newVal) => {
  if (newVal) {
    nextTick(() => {
      initPreviewCharts()
    })
  }
})

// 初始化所有图表
const initCharts = async () => {
  await nextTick()
  
  chart1Instance = echarts.init(chart1.value)
  chart2Instance = echarts.init(chart2.value)
  chart3Instance = echarts.init(chart3.value)
  
  initChart1()
  initChart2()
  initChart3()
  
  // 响应式处理
  window.addEventListener('resize', () => {
    chart1Instance?.resize()
    chart2Instance?.resize()
    chart3Instance?.resize()
  })
}

onMounted(() => {
  initCharts()
})
</script>

<style scoped>
.result-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e9edff 0%, #ffffff 10%);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(103, 148, 198, 0.4);
    box-sizing: border-box;
}

.title {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
}

.chart-section {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #2f7ed8;
}

.chart {
  width: 100%;
  height: 400px;
}

/* 为图一设置更高的高度 */
.chart-section:nth-child(2) .chart {
  height: 600px;
}

/* 为图二和图三设置更高的高度 */
.chart-section:nth-child(3) .chart,
.chart-section:nth-child(4) .chart {
  height:700px;
}

/* 按钮容器样式 */
.btn-container {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin: 50px 0;
}

.btn {
  width: 160px;
  line-height: 48px;
height: 48px;
background: #2D5DB5;
box-shadow: 0px 6px 16px 0px rgba(67,126,238,0.3);
border-radius: 4px;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.btn:hover {
  background-color: #1e6bc8;
}

.btn-excel {
  width: 140px;
  font-size: 20px;
  color: #909399;
  height: 48px;
  line-height: 48px;
  border-radius: 5px;
  text-align: center;
  background-color: none;
  border: 1px solid #D3D4D6;
  cursor: pointer;
}

.btn-excel:hover {
  background-color: #F5F6F7;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 1100px;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.dialog-header h2 {
  width: 100%;
  margin: 0;
  text-align: center;
  color: #333;
  font-size: 20px;
}

.close-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #333;
}

.dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.dialog-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  text-align: center;
}

.download-btn {
  background: #2D5DB5;
  color: white;
  box-shadow: 0px 6px 16px 0px rgba(67,126,238,0.3);
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-btn:hover:not(:disabled) {
  background-color: #1e6bc8;
}

.download-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* PDF页面样式 - 单页显示所有图表 */
.pdf-page {
  width: 1000px; /* A4宽度 */
  min-height: auto; /* 自适应高度 */
  margin: 0 auto 20px;
  padding: 15px 10px; /* 减少内边距，避免PDF中的留白 */
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.pdf-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #2f7ed8;
}

.pdf-chart-section {
  margin-bottom: 15px; /* 减少图表间距 */
}

.pdf-page .pdf-chart-section:last-child {
  margin-bottom: 0;
}

.pdf-chart-title {
  font-size: 22px; /* 增大字体以提高PDF清晰度 */
  font-weight: bold;
  color: #333;
  margin-bottom: 10px; /* 减少底部间距 */
  padding-left: 10px;
  border-left: 4px solid #2f7ed8;
}

.pdf-chart {
  width: 100%;
  height: 400px;
  margin-bottom: 10px; /* 减少底部间距 */
  box-sizing: border-box;
}

.pdf-chart.compact1 {
  width: 100%;
  height: 500px; /* 恢复原始高度 */
  margin-bottom: 10px;
  box-sizing: border-box;
}
.pdf-chart.compact2 {
  width: 100%;
  height: 700px; /* 恢复原始高度 */
  margin-bottom: 10px;
  box-sizing: border-box;
}
.pdf-chart.compact3 {
  width: 100%;
  height: 500px; /* 恢复原始高度 */
  margin-bottom: 10px;
  box-sizing: border-box;
}
/* 响应式调整 */
@media (max-width: 1024px) {
  .dialog-content {
    width: 95%;
    max-height: 95%;
  }
  
  .pdf-page {
    width: 100%;
    min-height: auto;
    transform: scale(0.8);
    transform-origin: top center;
  }
}
</style>